<!DOCTYPE html>
<html>
<head>

	<title>购买</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="yes" name="apple-touch-fullscreen">
	<meta content="telephone=no,email=no" name="format-detection">
	<link rel="stylesheet" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/AmazeUI/assets/css/amazeui.css">
	<link rel="stylesheet" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/common.css?v={$WST_V}">
	<link rel="stylesheet" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/normalize.css" type="text/css">
	<link rel="stylesheet" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/buy.css" type="text/css">
	<link rel="stylesheet" href="../css/small_page.css" type="text/css">
	<link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet">
	<script type="text/javascript" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/jisuan.js"></script>
	<script type="text/javascript" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/jquery-1.7.2.min.js"></script>
	<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
	<script src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/distpicker.data.js"></script>
	<script src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/distpicker.js"></script>

	 <style type="text/css">
		body{
			position: initial;
			width: 100%;
			line-height: normal;
		}
		.am-icon-arrow-up:before {
			content: "\f062";
		}
		.am-g {
		 margin: 0 auto;
		 width: 100%;
		}
		.yuanZi {
			position: relative;
		}
		.shunfeng{
			/*display: inline-block;*/
			width:auto;
			height:auto;
			position: relative;
			margin-left:0.2rem;
			float: left;
		 }
		.shunfeng:nth-of-type(1){
			margin-left:0;
		}
		.place{
			padding-top: 0;
			margin-top:0.426667rem;
		}
		.select{
			padding-top:0;
			margin-top:0.533333rem;
		}
		.Book {
			overflow: hidden;
			width: 100%;
			height: 6.2rem;
			box-shadow: 0 1px 4px 0 rgba(130,130,130,0.50);
			background: #fff;
		}
		.img{
			width:100%;
			height:100%;
		}
		.bookimg{
			position: relative;
			width:100%;
			height:100%;
			overflow: hidden;
		}
		.absolute{
			position: absolute;
			top:0;
			left:0;
		}
		.center{
			width:100%;
			height:100%;
			position: relative;
		}
		.text{
			position: absolute;
			top:0.2633rem;
			right:0.266667rem;
			font-size:0.106667rem;
		}
		.book{
			height:2.666667rem;
			position: absolute;
			top:1.066667rem;
			left:0;
			width: 100%;

		}
		.book_img{
		 	width: 3.253333rem;
  		 	height: 4.586667rem;
			box-shadow: 0 1px 4px 0 rgba(130,130,130,0.50);

		}
		.book_main{
		 	height:auto;
		 	/*overflow: hidden;*/
		}
		#booktext{
			position: absolute;
			top:4.08rem;
			left:0;
			width:100%;
			height:auto;
			text-align: center;
			font-size: 0.133333rem;
			font-family: fzxsjt;
		}
		.textname{
			border-bottom:0;
			height:auto;
			font-family: HansHandItalic;
		}
		.text1{
			top:0.533333rem;
		}
		.book1{
			top:1.733333rem;
			width:2.4rem;
			height:1.6rem;
		}

		.text2{
			top:0.266667rem;
		}
		.book2{
			top:1.146667rem;
			width:2.133333rem;
			height:2.666667rem;
			left:1.093333rem;
		}

		.text3{
			top:2.8rem;
		}
		.book3{
			top:0;
			left:0;
			height:2.4rem;

		}
		.alt{
			 width:100%;
			 height:auto;
		}
		.uploadimg{
			 margin-top:-15%;
		}
		.none{display: none}
		.sureDing{
			width:8.53rem;
			height:1.6rem;
			margin:0 auto;
			margin-top:0.5rem;
		}
		.dingImg{
			width:100%;
			height:100%;
		}
		.address{
	 		padding-bottom:0.32rem;
	 	}
	 	.imgbox1{
	           width: 2.8rem;
			    height: 1.96rem;
			    position: absolute;
			    top: 1.9rem;
			    left: 0.25rem;
			    overflow: hidden;
			    background-color: #fff;
		    
		}
		.imgbox2{
			width: 2.82rem;
		    height: 2.92rem;
		    position: absolute;
		    top: 0;
		    left: 0.46rem;
		    
		}
		.imgbox3{
			width: 2.12rem;
		    height: 3.2rem;
		    position: absolute;
		    top: 0.48rem;
		    left: 0.33rem;	
		}
		.shape_0{ 	/*长图	width/height	*/
			position: absolute; 
			height: 100%;
			left: 50%;
			top: 0;
			transform: translate(-50%);
		}
		.shape_1{ 	/*方图*/
			position: absolute; 
			height: 100%;
			width: 100%;
			left: 50%;
			top: 0;
			transform: translate(-50%);
		}
		.shape_2{ 	/*横图*/
			position: absolute; 
			width: 100%;
			left: 0;
			top: 50%;
			transform: translate(0,-50%);
		}
		 .input{
			 opacity: 1;
			 /*left: -156px;*/
			 top: -4px;
		 }
	</style>
</head>
<body>
	<div class="zhen">
		<div class="zhenzhao">
		</div>
		<div class="zhen_container">
			<div class="delete">
				<div class="delete_nav">
					<div class="nav_top">实物展示</div>
					<div class="weishu">微信书／微博书／空间书装帧通用</div>
				</div>
				<div class="delete_img"><img class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/edit_close_icon.png"></div>

			</div>
			<div class="pattern">
				<div class="wei_zhao">
					<div class="wei padding_left">微信书</div>
					<div class="zhao">照片书</div>
				</div>
				<div class="taozhuang">
					<div class="taozhuang_mian taozhuang_mian1" style="display: block;">
						<div class="zhuang_type">
							<div class="zhuang_img"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/buy_binding_ruanpi_icon.png" style="width:2.933333rem;height:0.8rem;"></div>
							<div class="text_img">
								<div class="write_text">【产品名字】：微信书·忆书
								</div>
								<div class="write_text">【产品材质】：封皮250g铜版纸覆膜，胶装对裱工艺，内页157g哑粉纸
								</div>
								<div class="write_text">
								【产品尺寸】：A5（210mm*148mm）
								</div>
								<div class="write_text">
								【产品数量】：60～220页（无数张照片）
								</div>
								<div class="write_text">
								【封皮价格】：A5¥8.00元/A4¥18.00元
								</div>
							</div>
							<div class="book_feng">
								<img class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/buy_binding_ruanpi_photo_book_photo.png">
							</div>
						</div>
						<div class="zhuang_type">
							<div class="zhuang_img"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/buy_binding_yinpi_icon.png" style="width:2.933333rem;height:0.8rem;"></div>
							<div class="text_img">
								<div class="write_text">【产品名字】：微信书·忆书
								</div>
								<div class="write_text">【产品材质】：封皮硬皮精装覆膜，胶装对裱工艺内页157g哑粉纸
								</div>
								<div class="write_text">
								【产品尺寸】：A5（210mm*148mm）
								</div>
								<div class="write_text">
								【产品数量】：60～220页（无数张照片）
								</div>
								<div class="write_text">
								【封皮价格】：A5¥18.00元/A4¥28.00元
								</div>
							</div>
							<div class="book_feng">
								<img class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/buy_binding_hardcover_wxbook.png">
							</div>
						</div>
						<!-- <div class="zhuang_type">
							<div class="zhuang_img"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/buy_binding_pihui_icon.png" style="width:2.933333rem;height:0.8rem;"></div>
							<div class="text_img">
								<div class="write_text">【产品名字】：微信书·忆书
								</div>
								<div class="write_text">【产品材质】：封皮采用皮革材质，奢华且保存性强，质感十足，胶装对裱工艺，内页157g特种纸
								</div>
								<div class="write_text">
								【产品尺寸】：A5/A4
								</div>
								<div class="write_text">
								【产品数量】：60～220页（无数张照片）
								</div>
								<div class="write_text">
								【封皮价格】：A5¥58.00元／A4¥88.00元
								</div>
							</div>
							<div class="book_feng">
								<img class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/buy_binding_skin_painted.png">
							</div>
						</div> -->
						<div class="zhuang_type">
							<div class="zhuang_img"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/typographic_style1_icon.png" style="/*width:2.933333rem;*/height:0.8rem;"></div>
							<div class="text_img">
								<div class="write_text">
								【产品尺寸】：A5（210mm*148mm）
								</div>
								<div class="write_text">
								【封面排版样式】：多种选择，可以自定义封面
								</div>								
							</div>
							<div class="book_feng">
								<img class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/typographic_style1.png">
							</div>
							<div class="text_img">
								<div class="write_text">
								【产品尺寸】：A5（210mm*148mm）
								</div>
								<div class="write_text">
								【手机尺寸】：iPhone6
								</div>								
							</div>
							<div class="book_feng">
								<img class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/typographic_style2.png">
							</div>
							<div class="text_img">
								<div class="write_text">
								【产品尺寸】：A4（285mm*210mm）
								</div>
								<div class="write_text">
								【手机尺寸】：iPhone6
								</div>								
							</div>
							<div class="book_feng">
								<img class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/typographic_style3.png">
							</div>
						</div>
					</div>
					<div class="taozhuang_mian taozhuang_mian2" style="display: none;">
						<div class="zhuang_type">
							<div class="zhuang_img"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/buy_binding_ruanpi_icon.png" style="width:2.933333rem;height:0.8rem;"></div>
							<div class="text_img">
								<div class="write_text">【产品名字】：照片书·忆书
								</div>
								<div class="write_text">【产品材质】：封皮250g哑粉纸覆膜，胶装对裱工艺，内页157g哑粉纸
								</div>
								<div class="write_text">
								【产品尺寸】：A5（210mm*148mm）
								</div>
								<div class="write_text">
								【产品数量】：60～220页（无数张照片）
								</div>
								<div class="write_text">
								【封皮价格】：A5¥8.00元/A4¥18.00元
								</div>
							</div>
							<div class="book_feng">
								<img class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/buy_binding_ruanpi_photo_book.png">
							</div>
						</div>
						<div class="zhuang_type">
							<div class="zhuang_img"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/buy_binding_yinpi_icon.png" style="width:2.933333rem;height:0.8rem;"></div>
							<div class="text_img">
								<div class="write_text">【产品名字】：照片书·忆书
								</div>
								<div class="write_text">【产品材质】：封皮硬皮精装覆膜，胶装对裱工艺内页157g哑粉纸
								</div>
								<div class="write_text">
								【产品尺寸】：A5（210mm*148mm）
								</div>
								<div class="write_text">
								【产品数量】：60～220页（无数张照片）
								</div>
								<div class="write_text">
								【封皮价格】：A5¥18.00元/A4¥28.00元
								</div>
							</div>
							<div class="book_feng">
								<img class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/buy_binding_ruanpi_weixins_photo_book_photo.png">
							</div>
						</div>
						<!-- <div class="zhuang_type">
							<div class="zhuang_img"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/buy_binding_pihui_icon.png" style="width:2.933333rem;height:0.8rem;"></div>
							<div class="text_img">
								<div class="write_text">【产品名字】：照片书·忆书
								</div>
								<div class="write_text">【产品材质】：封皮采用皮革材质，奢华且保存性强，质感十足，胶装对裱工艺，内页120g特种纸
								</div>
								<div class="write_text">
								【产品尺寸】：A4（285mm*210mm）
								</div>
								<div class="write_text">
								【产品数量】：60～220页（无数张照片）
								</div>
								<div class="write_text">
								【封皮价格】：A5¥58.00元／A4¥88.00元
								</div>
							</div>
							<div class="book_feng">
								<img class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/buy_binding_skin_painted_photo_book.png">
							</div>
						</div> -->
						<!--<div class="zhuang_type">-->
							<!--<div class="zhuang_img"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/buy_binding_hanshi_icon.png" style="width:2.933333rem;height:0.8rem;"></div>-->
							<!--<div class="text_img">-->
								<!--<div class="write_text">【产品名字】：照片书·忆书-->
								<!--</div>-->
								<!--<div class="write_text">【产品材质】：封皮采用硬皮精装覆膜，奢华且保存性强，质感十足，胶装对裱工艺，内页蝴蝶韩式无缝装，特种厚纸裱水蜡保护，照片书专属-->
								<!--</div>-->
								<!--<div class="write_text">-->
								<!--【产品尺寸】：A4（285mm*210mm）-->
								<!--</div>-->
								<!--<div class="write_text">-->
								<!--【产品数量】：35页/70面（无数张照片）-->
								<!--</div>-->
								<!--<div class="write_text">-->
								<!--【整本价格】：A5¥18.00元/A4¥28.00元-->
								<!--</div>-->
							<!--</div>-->
							<!--<div class="book_feng">-->
								<!--<img class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/buy_binding_korea_seamless_photobook.png">-->
							<!--</div>-->
						<!--</div>-->
						<!--<div class="zhuang_type">-->
							<!--<div class="zhuang_img"><img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/insidePageStyle_icon.png" style="width:2.933333rem;height:0.8rem;"></div>-->
							<!--<div class="text_img">-->
								<!--<div class="write_text">-->
								<!--【产品尺寸】：A5/A4-->
								<!--</div>-->
								<!--<div class="write_text">-->
								<!--【手机尺寸】：iPhone6-->
								<!--</div>-->
							<!--</div>-->
							<!--<div class="book_feng">-->
								<!--<img class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/buy_binding_skin_painted_photo_book.png">-->
							<!--</div>-->
							<!--<div class="text_img">-->
								<!--<div class="write_text">-->
								<!--【产品尺寸】：A5-->
								<!--</div>-->
								<!--<div class="write_text">-->
								<!--【排版样式】：个性化排版，不同的页脚风格可选，内页120g特种纸-->
								<!--</div>-->
							<!--</div>-->
							<!--<div class="book_feng">-->
								<!--<img class="img" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/buy_binding_styles_photobook.png">-->
							<!--</div>-->
						<!--</div>-->
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="container">

		<div class="main">
			<div class="Book">
			
			</div>
			<div class="orderDetails">
				<div class="order_main">
					<!--<div class="orderTop">-->
					<!--<div class="biaoti">订单详情</div>-->
					<!--<div class="number">-->
						<!--<div class="numberTop">-->
							<!--<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/Group 7.png" style="height:0.4rem;width:0.4rem;float:left;">-->
							<!--<span class="span">数量</span>-->
						<!--</div>-->
						<!--<div class="numberBot" id="aa">-->
						<!--<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/Group 9.png" style="height:0.96rem;width:0.96rem;float:left;" onclick="javascript:changeBookNum(1);">-->
						<!--<input type="number" value="1" name="" class="numberInput" maxlength="3" id="goodscount">-->
						<!--<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/Group 3.png" style="height:0.96rem;width:0.96rem;float:right;" onclick="javascript:changeBookNum(2);">-->
						<!--</div>-->
						<!--<div class="printingMain">-->
							<!--<div class="numberTop printing">-->
								<!--<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/Rectangle 5.png" style="height:0.4rem;width:0.4rem;float:left;">-->
								<!--<span class="span">印刷</span>-->
							<!--</div>-->
							<!--<div class="printingBot">-->
								<!--<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/Group 15.png" style="height:0.4rem;width:0.4rem;float:left;">-->
								<!--<span class="span1">标配用惠普indigo数码七色超高清印刷</span>-->
							<!--</div>-->
						<!--</div>-->
						<!--<div class="size">-->
							<!--<div class="numberTop">-->
								<!--<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/Rectangle 36.png" style="height:0.4rem;width:0.4rem;float:left;">-->
								<!--<span class="span">尺寸纸张类别</span>-->
								<!--<span class="smb">一页</span>-->
							<!--</div>-->
							<!--<div class="radio">-->
								<!--<volist name="papersize" id="v">-->
									<!--<div class="numberTop top">-->
										<!--<if condition="$v.psId eq 1">-->
											<!--<img class="imgn" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/Group 15.png" style="height:0.4rem;width:0.4rem;float:left;">-->
											<!--<else/>-->
											<!--<img class="imgn" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/Rectangle 19.png" style="height:0.4rem;width:0.4rem;float:left;">-->
										<!--</if>-->
										<!--<span class="span span_top">{$v.psName}</span>-->
										<!--<if condition="$v.psId eq 1">-->
											<!--<span class="smp">(推荐)</span>-->
										<!--</if>-->
										<!--<span class="smb">￥{$v.multiple}</span>-->
										<!--<input type="radio" name="size" class="input" data="{$v.multiple}" datat="{$v.paperType}" datap="{$v.psId}">-->
									<!--</div>-->
								<!--</volist>-->
								<!--<input type="hidden" id="multiple" value="{$papersize[0]['multiple']}">-->
								<!--<input type="hidden" id="paperType" value="{$papersize[0]['paperType']}">-->
								<!--<input type="hidden" id="paper" value="1">-->
							<!--</div>-->
						<!--</div>-->
					<!--</div>-->
					<!--<div class="binding">-->

						<!--<div class="size">-->
							<!--<div class="numberTop">-->
								<!--<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/Group 6.png" style="height:0.4rem;width:0.4rem;float:left;">-->
								<!--<span class="span">装帧</span>-->
								<!--<span class="smb color zhen1">查看不同装帧样式及价格</span>-->
							<!--</div>-->
							<!--<div class="radio">-->
								<!--<volist name="bookbinding" id="vo" key="k">-->
									<!--<div class="numberTop top">-->
										<!--<if condition="$vo.bbdId eq 1">-->
											<!--<img class="img1" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/Group 15.png" style="height:0.4rem;width:0.4rem;float:left;">-->
											<!--<else/>-->
											<!--<img class="img1" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/Rectangle 19.png" style="height:0.4rem;width:0.4rem;float:left;">-->
										<!--</if>-->
										<!--<span class="span span_top">{$vo.bbdName}</span>-->
										<!--<input type="radio" name="size" class="input1" data4="{$vo.aFour}" data5="{$vo.aFive}" datab="{$vo.bbdId}" data-num="{$k}">-->
									<!--</div>-->
								<!--</volist>-->
								<!--<input type="hidden" id="aFourMoney" value="{$bookbinding[0]['aFour']}">-->
								<!--<input type="hidden" id="aFiveMoney" value="{$bookbinding[0]['aFive']}">-->
								<!--<input type="hidden" id="bookbinding" value="2">-->
								<!--<input type="hidden" id="special" value="0">-->
								<!--<input type="hidden" id="relation" value="{$relation}">-->
							<!--</div>-->
						<!--</div>-->
					<!--</div>-->
					<!--<div class="price">-->
						<!--<div class="numberTop">-->
								<!--<span style="height:0.4rem;width:0.4rem;float:left;color:#039BE5;">￥</span>-->
								<!--<span class="span">价格</span>-->
							<!--</div>-->
						<!--<div class="money">-->
							<!--<div class="yuanjia1">-->
								<!--<div class="yuanZi floatLeft">原价</div>-->
								<!--<div class="yuanZi floatRight">￥&nbsp;<span id="totalMoney">0.00</span></div>-->
								<!--<input type="hidden" id="realtotalmoney" value/>-->
							<!--</div>-->
							<!--<div class="yuanjia1">-->
								<!--<div class="yuanZi floatLeft" id="wuliugongsi"><div class="shunfeng">物流</div>-->
								<!--<volist name="wuliu" key="key" id="vo">-->
									<!--<div class="shunfeng">-->
										<!--<if condition="$vo.articleId eq 0">-->
											<!--<img class="img2" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/Group 15.png" style="height:0.4rem;width:0.4rem;float:left;margin-top:0.053333rem;">-->
											<!--<else/><img class="img2" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/Rectangle 19.png" style="height:0.4rem;width:0.4rem;float:left;margin-top:0.053333rem;">-->
										<!--</if>-->

										<!--<input type="radio" name="size1" class="input2 wuliu" data-id="{$vo.articleId}" data-price="{$vo.firstheavycost}" data-add="{$vo.continuedheavycost}" data-first="{$vo.firstheavy}" data-second="{$vo.continuedheavy}">-->
										<!--<span class="span span_top">{$vo.catName}</span>-->
									<!--</div>-->
								<!--</volist>-->

								<!--</div>-->

								<!--<input type="hidden" id="wuliuType" value="">-->
								<!--<div class="yuanZi floatRight">￥&nbsp;<span id="kd">0.00</span></div>-->
							<!--</div>-->
						<!--</div>-->
						<!--<div>温馨提示：忆书回忆录包邮默认快递韵达，支持顺丰加收12元，偏远山区不包邮（新疆、西藏、内蒙）</div>-->
						<!--<div class="preferential">-->
							<!--<div class="shunfeng" id="pre-div">亲~你暂时还没有优惠券哦</div>-->
							<!--<div class="yuanZi floatLeft"  id="preferential">-->
								<!--<div class="shunfeng">优惠券</div>-->
								<!--<volist>-->
									<!--<div class="present">-->
										<!--<img class="img3" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/Rectangle 19.png" style="height:0.4rem;width:0.4rem;float:left;margin-top:0.053333rem;">-->
										<!--<input type="radio" name='item' class="input3 wuliu" value="0">-->
											<!--<span class="span span_top">使用</span>-->
										<!---->
									<!--</div>-->
								<!--</volist>-->
								<!--<volist>-->
									<!--<div class="present" style="margin-left: 5px;">-->
										<!--<img class="img4" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/Rectangle 19.png" style="height:0.4rem;width:0.4rem;float:left;margin-top:0.053333rem;">-->
										<!--<input type="radio" name='item' class="input4 wuliu">-->
											<!--<span class="span span_top">不使用</span>-->
										<!--<div class="pre-span">-->
											<!--<span >￥-->
											<!--<span >0.00</span>-->
										<!--</span>-->
										<!--</div>-->
									<!--</div>-->
								<!--</volist>							-->
							<!--</div>-->
						<!--</div>-->
						<!--<div class="yuanjia bot">-->
							<!--<div class="yuanZi floatLeft heji">合计</div>-->
							<!--<div class="yuanZi floatRight red">-->
								<!--<div id="real1">￥<span id="real">0.00</span></div>-->
								<!--<br/>-->
								<!--<if condition="$relation eq 1">-->
									<!--<span>(若您使用忆书码支付，则超过60页的部分还需补差价哦)</span>-->
									<!--<elseif condition="$relation eq 1"/>-->
									<!--<span></span>-->
									<!--<elseif condition="$relation eq 2"/><span>(若您使用忆书码支付，则超过120页的部分还需补差价哦)</span><span></span>-->
									<!--<elseif  condition="$relation eq 3"/><span>(若您使用忆书码支付，则超过120页的部分还需补差价哦)</span><span></span>-->
								<!--</if>-->
							<!--</div>-->
						<!--</div>-->
					<!--</div>-->
					<!--</div>-->
				</div>
				<div class="information">
					<div class="information_main">
						<div class="biaoti">收信人信息</div>
						<div class="numberTop" style="margin-top:1.066667rem;">
							<!--<!--<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/Rectangle 32.png" style="height:0.4rem;width:0.4rem;float:left;">-->-->
							<span class="span">收件人姓名与联系手机电话</span>
						</div>
						<span class="place">请输入：</span>
						<div class="two_input">
							<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/Rectangle 24.png" style="width:0.4rem;height:0.426667rem;float:left;">
							<input type="text" name="" class="place_input" placeholder="收件人姓名" id="userName">
							<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/Rectangle 24 Copy 2.png" style="width:0.48rem;height:0.506667rem;float:left;margin-left:0.47rem;">
							<input type="text" name="" class="place_input" placeholder="手机号码" id="phone">
						</div>
						<div class="information_main">
						<div class="numberTop" style="margin-top:1.066667rem;">
							<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/Rectangle 24 Copy.png" style="height:0.4rem;width:0.4rem;float:left;">
							<span class="span">收件地址</span>
						</div>
						<span class="place">请选择：</span>
						 <form class="form-inline">
						      <div data-toggle="distpicker">
						        <div class="form-group form-group1">
						          <label class="sr-only" for="province1">Province</label>
						          <select class="form-control form-control1" id="province1"></select>
						        </div>
						        <div class="form-group form-group2">
						          <label class="sr-only" for="city1">City</label>
						          <select class="form-control form-control2" id="city1"></select>
						        </div>
						        <div class="form-group form-group3">
						          <label class="sr-only" for="district1">District</label>
						          <select class="form-control form-control3" id="district1"></select>
						        </div>
						      </div>
					    </form>
						</div>
						<div class="address">
							<span class="place">请输入：</span>
							<input type="text" name="" value="" class="address_input" placeholder="详细地址（街道/小区/门牌号等）" id="address">
						</div>
						<div class="address">
							<div class="numberTop" style="margin-top:1.066667rem;">
							<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/Rectangle 6.png" style="height:0.4rem;width:0.4rem;float:left;">
						<!--</div>-->
						<span class="span">留言备注</span>
							<input type="text" name=""/ value="" class="address_input" placeholder="说出你内心的小纠结，我们尽最大的能力满足你呢～" id="orderRemarks">
						</div>
					</div>
					</div>
					<div class="remind">
							<span style="color: #FFBC00;;font-size:0.426667rem;">温馨提醒</span>
						<div class="remind_text">
						1.纸质书以电子版预览为准，请务必确认<span>封面与内页正确，整本书内容检查完整</span>后下单。如果您有疑问可下单前咨询公众号忆书小编客服，<span>付款即定稿进入自动印刷流程，允许半个小时内更改编辑新内容，</span>联系公众号忆书小编客服解锁，过了半个小时<span>私人订制不支持修改或撤单</span>；<br>
						2.下单如超过125页/双面，即默认系统平均自动分册。封面书名后会标注(1),(2),如果有特殊的需求，可以联系公众号忆书小编客服或留言备注。<br>
						3.已进去订单高峰期，优忆库承诺在5个工作日内发货，您可以访问『我的-我的订单』页面，查看物流。
						</div>
					</div>
				</div>

			</div>
		</div>
		<div class="sureDing" onclick="addOrder()">
			<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/buy_confirm_order_nor.png" class="dingImg">
		</div>
		<!-- <div class="zhifu">
			<div class=zhifu_img onclick="addOrder()">
				<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/Rectangle 33.png" style="width:100%;height:100%;">
			</div>
			<div class=zhifu_img>
				<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/Rectangle 33 Copy.png" style="width:100%;height:100%;">
			</div>
			<div class=zhifu_img>
				<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/Rectangle 33 Copy 2.png" style="width:100%;height:100%;">
			</div>
		</div> -->
		<!--<div class="city">
			<div class="cityback"></div>
			<div class="cityProv">
				<div class="city_header">请选择省份</div>
				<div class="city_bot">
					<div class="select_ul u1" id="areaId1">
					<volist name="areaList" id="vo">
						<div class="select_li" onclick="getAreaList('areaId2',{$vo['areaId']},0)">{$vo['areaName']}</div>
					</volist>
					</div>

					</div>
					<div class="select_ul u2" id="areaId2">
						<div class="select_li">请选择</div>

					</div>
					<div class="select_ul ul_none u3" id="areaId3">
						<div class="select_li">请选择</div>
					</div>
				</div>

			</div>-->
		</div>
	</div>
  <input type="hidden" value="{$iscoupon}" id='iscoupon'/>
	</div>
	<div class="zhaobot"></div>
	</div>
	</div>
	</div>
	<div class="am-g wst-msg-modal" id="wst-msg-modal">
		<div class="wst-modal-content" id="wst-modal-content"></div>
	</div>
	<div class="wst-to-top" id="toTop">
		<i class="am-icon-arrow-up wst-to-top-icon"></i>
	</div>
	<script src="../js/buy.js"></script>
	<include file="./Apps/WebApp/View/default/common_js.html" />
	<script>
		/*获取滚动条的位置*/
//		var ModalHelper = (function(bodyCls) {
//			var scrollTop;
//			return {
//				afterOpen: function() {
//					scrollTop = document.scrollingElement.scrollTop;
//					document.body.classList.add(bodyCls);
//					document.body.style.top = -scrollTop + 'px';
//				},
//				beforeClose: function() {
//					document.body.classList.remove(bodyCls);
//					document.scrollingElement.scrollTop = scrollTop;
//				}
//			};
//		})('gfixed');
window.onload = function(){
	var totalpg = Number( $("#bookPage").text() );
	var bookType = $("#bookType").val();
	if(totalpg<60){
		console.log("由于本书页码不够60页，剩余的页数将会以我们忆书特别设计的精美留言录来补充");
	}else if(totalpg>220){
		if(bookType == 4){
            conole.log("已超过220页，请重新制作");
			return;
		}else{
            conole.log("已超过220页，会自动分为上下两册");
		}
	}

	$(".form-control1 option:selected").attr('selected',false);
	$(".form-control2 option:selected").attr('selected',false);
	$(".form-control3 option:selected").attr('selected',false);
}
		function getAreaList(objId,parentId,t,id){
			var params = {};
			parentId = parentId;
			$('#'+objId).empty();
			if(t<1){
				//保存地区
				$('#aId1').val(parentId);
				$('.li2').val('城市');
				$('.li3').val('区/县');
				//先情况之前选择的快递信息
				$('#wuliuType').val('');
				$('#kd').text('0.00')
				//快递变化
				$.post("{:U('WebApp/Orders/getSetUpDeliver')}",{areaId:parentId},function(data){
//					alert(JSON.stringify(data))
					var content='物流'
					$('#wuliugongsi').empty();
					for(var k=0;k<data.length;k++){
						content+='<div class="shunfeng">';
						content+='<img class="img2" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/Rectangle 19.png" style="height:0.4rem;width:0.4rem;float:left;margin-top:0.053333rem;">';
						content+='<input type="radio" name="size1" class="input2 wuliu" data-id="'+data[k].articleId+'" data-price="'+data[k].firstheavycost+'" data-add="'+data[k].continuedheavycost+'" data-first="'+data[k].firstheavy+'" data-second="'+data[k].continuedheavy+'">';
						content+='<span class="span span_top">'+data[k].catName+'</span>';
						content+='</div>';
					}
					$('#wuliugongsi').append(content);
					//物流选择
					$('.input2').click(function(){
						$('.img2').attr('src',WST.ROOT +'/Apps/WebAppView/default/images/Rectangle 19.png');
						$(this).siblings().attr('src',WST.ROOT +'/Apps/WebApp/View/default/images/Group 15.png');
						$(this).addClass('cur');
						var weight=computeWeight();
						var type=$(this).attr('data-id');
						var kd=Number($(this).attr('data-price'));
						var add=Number($(this).attr('data-add'));
						var money=0;
						$('#wuliuType').val(type);
						if(weight>1000){
							money=kd+((weight/1000)-1)*add;
						}else{
							money=kd;
						}
						$('#kd').text(money.toFixed(2))

						realMoney();
					})
				})
			}else{

				$('#aId2').val(parentId);
				$('.li3').val('区/县');
//				alert(99)
			}
			$.post("{:U('WebApp/Areas/queryByList')}",params,function(data,textStatus){
//				alert(JSON.stringify(data))
				var json = WST.toJson(data);
				if(json.status=='1' && json.list.length>0){
					var opts = null;
					var str='';
					for(var i=0;i<json.list.length;i++){
						opts = json.list[i];
						if(t<1){
							str+='<div class="select_li" onclick="getAreaList(\'areaId3\','+opts.areaId+',1)">'+opts.areaName+'</div>';
						}else{
							str+='<div class="select_li" onclick="addArea('+opts.areaId+')">'+opts.areaName+'</div>';
						}
					}
				}
				$('#'+objId).append(str);
				$('.u2 div').click(function(){
					$('.li2').val($(this).text());
					$('.city').hide();
					$('.u2').hide();
//					ModalHelper.beforeClose();
//					$('body').removeClass('gfixed');
				})
				$('.u3 div').click(function(){
					$('.li3').val($(this).text());
					$('.city').hide();
					$('.u3').hide();
//					ModalHelper.beforeClose();
//					$('body').removeClass('gfixed');

				})


			});

		}
		$('.choose1').click(function(){
			$('.city').show();
			$('.u1').show();
			$('.city_header').text('请选择省份');

		})
		$('.choose2').click(function(){
			$('.city').show();
			$('.u2').show();
			$('.city_header').text('请选择城市');
		})
		$('.choose3').click(function(){
			$('.city').show();
			$('.u3').show();
			$('.city_header').text('请选择区/县');
		})
		//阻止事件冒泡
		function stopPropagation(e) {
			if (e.stopPropagation)
				e.stopPropagation();
			else
				e.cancelBubble = true;
		}

		$('.cityback').bind('click',function(){
			$('.city').hide();
			$('.select_ul').hide();
		});
		$('.choose1').bind('click',function(e){
			stopPropagation(e);
		});
		$('.choose2').bind('click',function(e){
			stopPropagation(e);
		});
		$('.choose3').bind('click',function(e){
			stopPropagation(e);
		});

		function addArea(id){
			$('#aId3').val(id)
		}
		function addOrder(){
			var userId = sessionStorage.getItem("userId");
			var pbId = sessionStorage.getItem("pbId");
			var bookType = $("#bookType").val();
			//ordergoods
			goodsId=$('#goodsId').val()
			page=Number($('#bookPage').text());//页数
			paper=Number($('#paper').val());//纸张材质
			var relation=$('#relation').val();
			console.log(goodsId,page,paper);
			 bookbinding=$('#bookbinding').val();
			goodsNums=Number($('#goodscount').val());//数量
			console.log("数量:"+goodsNums)
			//orders
			total=Number($('#totalMoney').text());//价格
			console.log("价格:"+total)
//			wuliuType=1;//快递类型
			wuliuType=$('#wuliuType').val();//快递类型
			console.log("快递类型"+wuliuType)
			kd=Number($('#kd').val());//快递
//			kd=0;
			console.log("快递:"+kd)
			userName=$('#userName').val();//收件人姓名
			console.log("收件姓名:"+userName)
			phone=$('#phone').val()//联系电话
			console.log("联系电话:"+phone)
			areaId1=$(".form-control1 option:selected").attr('data-code');
			areaId2=$(".form-control2 option:selected").attr('data-code');
			areaId3=$(".form-control3 option:selected").attr('data-code');
			address=$('#address').val()//详细地址
			console.log("详细地址:"+areaId1,areaId2,areaId3,address)
			orderRemarks=$('#orderRemarks').val()//留言
			console.log("我的留言:"+orderRemarks)	
			      $.ajax({
							type:"POST",
							url:"http://www.youyiku-yishu.cn/WebApp/AppOrders/addBookOrder",
							data:{
								userId:userId,
								goodsId:goodsId,
								total:100,
								kd:kd,
								wuliuType:wuliuType,
								page:page,
								paper:paper,
								userName:userName,
								phone:phone,
								areaId1:areaId1,
								areaId2:areaId2,
								areaId3:areaId3,
								address:address,
								orderRemarks:orderRemarks,
								goodsNums:goodsNums,
								bookbinding:bookbinding
							},
						    dataType:"json",
							beforeSend: function (XMLHttpRequest) {
							XMLHttpRequest.setRequestHeader("DEVICEINFO", "JxRaZezavm3HXM3d9pWnYiqqQC1SJbsU");
													       }
							}).then(data=>{
							var orderId=data.orderId;
							sessionStorage.setItem("orderId", orderId);
//							location.href = "./sureOrder.html";
							
									 })
			
		}
	/*$(".input1:last").click(function(){
		var bookpage = Number( $("#bookPage").text() );
		if(bookpage>70){
			wstMsg("页数超过35页(一页双面)，无法制作！请重新制作");
		}
	})*/
	//是否使用优惠券
	
	</script>
	<script type="text/javascript">

			$('form').click(function(){
			var options1=$(".form-control1 option:selected").attr('data-code'); 
			var options2=$(".form-control2 option:selected").attr('data-code'); //获取选中的项 
			var options3=$(".form-control3 option:selected").attr('data-code'); //获取选中的项 
//			var options=options1+"/" +options2 +"/"+ options3;
//		console.log(options);
		})
	</script>
</body>
</html>